<template>
    <div
        class="fixed flex overflow-auto h-screen flex-col top-14 left-0 w-14 hover:w-64 md:w-64 bg-blue-800 text-white  bg-blue-600">
        <div>
            <ul class="flex flex-col justify-items-center">
                <li v-for="(menu,index) in menus" :key="index" @mouseenter="changeli(index,menu)"
                    class="border-b border-white  cursor-pointer flex flex-col
                    ">
                    <div v-show="$hd.access(menu.permission)">
                        <div class="flex flex-col h-16 items-center justify-center ">
                            <div class="flex justify-between items-center">
                                <span>
                                <i :class="menu['icon']" class="text-xl mr-2"></i>
                                </span>
                                <span>{{ menu.title }}</span>
                                <i v-if="menu.items" class="el-icon-arrow-right ml-2"></i>
                            </div>
                        </div>

                        <div v-if="menu.items" class="flex flex-col items-center justify-center text-sm">
                            <div class="flex flex-col items-start">
                                <div v-for="item in menu.items" v-if="item.show && $hd.access(item.permission)" class="my-1
                                    transition duration-300 ease-out  bg-blue-800 hover:scale-110
                                    transform  hover:-translate-y-1">
                                    <span>
                                     <i :class="item['icon']"></i>
                                    </span>
                                    <router-link :to="{path:item.path}" class="pb-1">
                                        <span>{{ item.title }}</span>
                                    </router-link>
                                </div>
                            </div>
                        </div>

                    </div>

                </li>
                <li>
                    <div class="flex flex-col mt-5 bottom-16 w-full text-center font-semibold h-24">
                        Copyright ©2021
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import menus from './menus.js'

export default {
    data() {
        return {
            menus: menus
        }
    },
    methods: {
        changeli(ind, menu) {
            this.menus.forEach(m => {
                if (m.hasOwnProperty('items') && m !== menu) {
                    m.items.forEach(mu => {
                        mu.show = false
                    })
                }
            })

            if (menu.hasOwnProperty('items')) {
                menu.items.forEach(mu => {
                    mu.show = true
                })
            }

        }
    }

}
</script>

<style scoped>
.active {
    @apply
}
</style>
